import { defineComponent, reactive, toRefs, computed } from "vue"
import { inject } from "vue"

import emitter from "amtf/utils/emitter"
import { useEmitter } from "amtf/hooks"

import { use样式 } from "amtf/hooks"
import { getValByUnit, 拼组件名, isFunction, isBoolean, getRandomId } from "amtf/utils"
const 主名 = "table-expand-tr"
const 组件名 = 拼组件名(主名)

export default defineComponent({
    name: 组件名,
    props: {
        tableViewportWidth: {
            type: Number,
            default: 0,
        },
        expandColumn: {
            type: Object,
            default: () => null,
        },
        colgroups: {
            type: Array,
            required: true,
        },
        expandOption: {
            type: Object,
            default: () => null,
        },
        expandedRowkeys: {
            type: Array,
            default: () => [],
        },
        rowData: {
            type: Object,
            required: true,
        },
        rowIndex: {
            type: Number,
            required: true,
        },
        rowKeyFieldName: {
            type: String,
            default: null,
        },
    },
    setup(props) {
        const { 拼样式名_table直属 } = use样式(主名)

        const columnCount = computed(() => props.colgroups.length)
        const currentRowKey = computed(() => props.rowData[props.rowKeyFieldName])
        const isRowExpanded = computed(() => {
            let result = false
            const { expandOption, expandedRowkeys, currentRowKey } = props
            if (expandOption.defaultExpandAllRows) {
                result = true
            } else if (expandedRowkeys.includes(currentRowKey)) {
                result = true
            }
            return result
        })
        const expanRowClass = computed(() => ({
            [拼样式名_table直属("expand-tr")]: true,
        }))
        const hasLeftFixedColumn = computed(() => props.colgroups.some(x => x.fixed === "left"))
        const expandTdContentStyle = computed(() => {
            let result = {}
            if (hasLeftFixedColumn) {
                if (props.tableViewportWidth) {
                    result["width"] = props.tableViewportWidth + "px"
                }
            }
            return result
        })

        function getExpandRowContent() {
            const { expandOption } = props
            let result =
                expandOption.render &&
                expandOption.render(
                    {
                        row: props.rowData,
                        column: props.expandColumn,
                        rowIndex: props.rowIndex,
                    },
                    null
                )
            return result
        }

        return () => {
            const { isRowExpanded, columnCount, getExpandRowContent } = props
            let result = null
            if (isRowExpanded) {
                const content = getExpandRowContent()
                result = (
                    <tr class={expanRowClass.value}>
                        <td class={拼样式名_table直属("expand-td")} colSpan={columnCount}>
                            <div class={拼样式名_table直属("expand-td-content")} style={expandTdContentStyle.value}>
                                {content}
                            </div>
                        </td>
                    </tr>
                )
            }
            return result
        }
    },
})
